<template>
<div class="shop-list">
    <Form :model="formItem" ref="formItem" :inline="true" action="javascript:void(0)">
        <FormItem>
            <Select v-model="formItem.type" :style="{'width':'140px'}" clearable>
                <Option v-for="item in typelist" :value="item.id" :key="item.id">{{ item.name }}</Option>
            </Select>
        </FormItem>
        <FormItem>
            <Input v-model="formItem.key" placeholder="输入关键词查找..."></Input>
        </FormItem>
        <FormItem>
            <Button type="primary" @click="renderTable('formItem')">查找</Button>
        </FormItem>
    </Form>
    <div class="action-btn">
        <Button size="small" @click="deleteData" style="margin-right: 8px" type="error">批量删除</Button>
        <Button size="small" @click="showModel" type="success">添加店铺</Button>
    </div>
    <Table border ref="adlist" :columns="list" :data="tablelist" :loading="dataloading" @on-selection-change="changeData">
        <template slot-scope="{ row }" slot="type">
            <Tag color="green" v-if="row.type == 1">天猫</Tag>
            <Tag color="orange" v-if="row.type == 2">淘宝</Tag>
            <Tag color="red" v-if="row.type == 3">京东</Tag>
            <Tag color="purple" v-if="row.type == 4">拼多多</Tag>
        </template>
        <template slot-scope="{ row }" slot="status">
            <Tag color="green" v-if="row.status">正常</Tag>
            <Tag color="volcano" v-if="row.status == false">关闭</Tag>
        </template>
        <template slot-scope="{ row, index }" slot="action">
            <Button type="success" size="small" style="margin-right: 5px;float:left" @click="showRelationShop(row.id)">关联</Button>
            <Button type="info" size="small" style="margin-right: 5px;float:left" @click="showEditShop(row.id)">编辑</Button>
            <Button type="error" size="small" style="margin-right: 5px;float:left" @click="remove(index,row.id)">删除</Button>
            <Button type="info" size="small" @click="authTarget(row.id)" style="margin-right: 5px;float:left">授权</Button>
            <Button type="info" size="small" @click="addressTarget(row.id)">地址列表</Button>
        </template>
    </Table>
    <!-- 分页 -->
    <div class="table-page">
        <Page size="small" ref="listPage" :total="pages.total" :current="pages.current" :page-size="pages.size" show-elevator show-total @on-change="changePage"></Page>
    </div>
    <!-- 添加的弹出 -->
    <!-- 需要全屏时添加这句 :mask="false" class-name="idw100" -->
    <Drawer :closable="false" :mask-closable="false" :scrollable="true" title="添加店铺" width="640" v-model="showModalStatus">
        <Spin size="large" fix v-if="loading"></Spin>
        <Form :model="shop" ref="shopValidate" label-position="right" :label-width="80" :rules="shopValidate" action="javascript:void(0)">
            <FormItem label="类型" prop="type">
                <Select v-model="shop.type" :style="{'width':'240px'}" clearable>
                    <Option v-for="item in typelist" :value="item.id" :key="item.id">{{ item.name }}</Option>
                </Select>
            </FormItem>
            <FormItem label="名称" prop="shopname">
                <Input v-model="shop.shopname" placeholder="输入名称..."></Input>
            </FormItem>
            <FormItem label="店铺ID" prop="shopid">
                <Input v-model="shop.shopid" placeholder="输入店铺ID，从平台获取到的..."></Input>
            </FormItem>
            <FormItem label="状态">
                <i-switch v-model="shop.status">
                    <span slot="on">正常</span>
                    <span slot="off">禁用</span>
                </i-switch>
            </FormItem>
            <FormItem>
                <Button style="margin-right: 8px" @click="showModalStatus = false">取消</Button>
                <Button type="primary" @click="createShop('shopValidate')">提交</Button>
            </FormItem>
        </Form>
    </Drawer>
    <!-- 修改的弹出 -->
    <Drawer :closable="false" :mask-closable="false" :scrollable="true" title="修改店铺" width="640" v-model="showEditModalStatus">
        <Spin size="large" fix v-if="loading"></Spin>
        <Form :model="shop" ref="shopValidate" label-position="right" :label-width="80" :rules="shopValidate" action="javascript:void(0)">
            <FormItem label="类型" prop="type">
                <Select v-model="shop.type" :style="{'width':'240px'}" clearable>
                    <Option v-for="item in typelist" :value="item.id" :key="item.id">{{ item.name }}</Option>
                </Select>
            </FormItem>
            <FormItem label="名称" prop="shopname">
                <Input v-model="shop.shopname" placeholder="输入名称..."></Input>
            </FormItem>
            <FormItem label="店铺ID" prop="shopid">
                <Input v-model="shop.shopid" placeholder="输入店铺ID，从平台获取到的..."></Input>
            </FormItem>
            <FormItem label="状态">
                <i-switch v-model="shop.status">
                    <span slot="on">正常</span>
                    <span slot="off">禁用</span>
                </i-switch>
            </FormItem>
            <FormItem>
                <Button style="margin-right: 8px" @click="showEditModalStatus = false">取消</Button>
                <Button type="primary" @click="editShop('shopValidate')">提交</Button>
            </FormItem>
        </Form>
    </Drawer>
    <!-- 关联 -->
    <Drawer :closable="false" :mask-closable="false" :scrollable="true" title="关联店铺" width="640" v-model="showRelationModalStatus">
        <Table border ref="relationlist" :columns="rlist" :data="relationlist" :loading="relationloading" @on-selection-change="changeRelationData">
            <template slot-scope="{ row }" slot="type">
                <Tag color="green" v-if="row.type == 1">天猫</Tag>
                <Tag color="orange" v-if="row.type == 2">淘宝</Tag>
                <Tag color="red" v-if="row.type == 3">京东</Tag>
                <Tag color="purple" v-if="row.type == 4">拼多多</Tag>
            </template>
        </Table>
        <div class="drawer-footer">
            <Button style="margin-right: 8px" @click="showRelationModalStatus = false">取消</Button>
            <Button type="primary" @click="relationShop()">提交</Button>
        </div>
    </Drawer>
</div>
</template>

<script>
export default {
    name: 'ShopList',
    data() {
        return {
            shop_id:0,
            loading: false,
            dataloading: true,
            relationloading:true,
            formItem: {
                'type':0,
                'key': ''
            },
            pages: {
                current: 1,
                total: 0,
                size: 10
            },
            list: [
                {
                    type: 'selection',
                    width: 60,
                    align: 'center',
                },
                {
                    title: '平台',
                    slot: 'type',
                    width: 120
                },
                {
                    title: '名称',
                    minWidth: 200,
                    key: 'shopname',
                },
                {
                    title: '店铺ID',
                    width: 200,
                    key: 'shopid',
                },
                {
                    title: 'TOKEN',
                    width: 200,
                    key: 'access_token',
                },
                {
                    title: 'token时间',
                    width: 180,
                    key: 'expires_at_date',
                },
                {
                    title: '状态',
                    slot: 'status',
                    width: 90
                },
                {
                    title: '操作',
                    slot: 'action',
                    width: 320
                }
            ],
            rlist:[
                {
                    type: 'selection',
                    width: 60,
                    align: 'center',
                },
                {
                    title: '平台',
                    slot: 'type',
                    width: 120
                },
                {
                    title: '名称',
                    key: 'shopname',
                },
                {
                    title: '店铺ID',
                    key: 'shopid',
                }
            ],
            tablelist: [],
            relationlist:[],
            shop: {
                type: 0,
                shopname: '',
                shopid: '',
                status: true
            },
            showModalStatus: false,
            showEditModalStatus:false,
            showRelationModalStatus:false,
            shopValidate: {
                type: [
                    { required: true, type: 'integer', message: '类型必须填写', trigger: 'change' }
                ],
                shopname: [
                    { required: true, message: '店铺名称必须填写', trigger: 'blur' }
                ],
                shopid: [
                    { required: true, message: '店铺ID必须填写', trigger: 'blur' }
                ]
            },
            typelist:[
                {'id':1,'name':'天猫'},
                {'id':2,'name':'淘宝'},
                {'id':3,'name':'京东'},
                {'id':4,'name':'拼多多'},
            ],
            selectData:[],
            selectRelationData:[],
        }
    },
    created: function() {
        // 取数据
        this.getTableList();
    },
    // 组件
    components: {
    },
    methods: {
        changePage() {
            this.pages.current = this.$refs['listPage'].currentPage;
            this.getTableList();
        },
        // 选择id
        changeData: function(index) {
            this.selectData = index
        },
        getTableList: function() {
            var params = { page: this.pages.current,'size':this.pages.size};
            this.$api.shop.list(params).then(res => {
                this.dataloading = false;
                if (res.code == 200) {
                    this.tablelist = res.result.list;
                    this.pages.total = res.result.total
                    this.$Message.success(res.message);
                }
            });
            return;
        },
        // 展开添加
        showModel() {
            this.showModalStatus = !this.showModalStatus;
            this.shop = {
                type: 0,
                shopname: '',
                shopid: '',
                status: true
            };
        },
        // 添加
        createShop(name) {
            this.$refs[name].validate((valid) => {
                if (valid) {
                    this.loading = true;
                    this.$api.shop.create(this.shop).then(res => {
                        if (res.code == 200) {
                            this.getTableList();
                            this.showModalStatus = !this.showModalStatus;
                        }
                        this.loading = false;
                    }).finally(res => {
                        this.loading = false;
                    });
                } else {
                    this.$Message.error('请检查输入的信息是否正确！');
                    this.loading = false
                }
            })
        },
        showEditShop:function(id){
            this.shop_id = id;
            this.loading = true;
            this.$api.shop.detail({shop_id:id}).then(res => {
                if (res.code == 200) {
                    this.shop = res.result
                    this.loading = false;
                }
            })
            this.showEditModalStatus = !this.showEditModalStatus;
        },
        editShop:function(name){
            this.$refs[name].validate((valid) => {
                if (valid) {
                    this.loading = true;
                    this.shop.shop_id = this.shop_id
                    this.$api.shop.edit(this.shop).then(res => {
                        if (res.code == 200) {
                            this.getTableList();
                            this.showEditModalStatus = !this.showEditModalStatus;
                        }
                        this.loading = false;
                    }).finally(res => {
                        this.loading = false;
                    });
                } else {
                    this.$Message.error('请检查输入的信息是否正确！');
                    this.loading = false
                }
            })
        },
        // 关联
        showRelationShop:function (id) {
            this.shop_id = id;
            this.relationloading = true;
            this.$api.shop.getshop({shop_id:id}).then(res => {
                if (res.code == 200) {
                    this.relationlist = res.result
                    this.relationloading = false;
                }
            })
            this.showRelationModalStatus = !this.showRelationModalStatus;
        },
        relationShop:function(){
            var ids = [];
            this.selectRelationData.forEach((item, index) => {
                ids.push(item.id);
            })
            this.$api.shop.relation({ shop_id: this.shop_id,shop2_id:ids }).then(res => {
                if (res.code == 200) {
                    this.$Message.success(res.message);
                    this.showRelationModalStatus = !this.showRelationModalStatus;
                }
            });
        },
        changeRelationData:function(index){
            this.selectRelationData = index
        },
        // 删除
        remove: function(index, id) {
            // 弹出确认框
            this.$Modal.confirm({
                title: '警告',
                content: '<p>此操作不可恢复，三思而后行...</p>',
                onOk: () => {
                this.$api.shop.remove({ shop_id: [id] }).then(res => {
                    if (res.code == 200) {
                    this.$Message.success(res.message);
                    this.tablelist.splice(index, 1);
                    }
                });
                }
            });
        },
        sort:function (id,value) {
            this.$api.shop.sort({ ad_id: id,sort:value }).then(res => {
                if (res.code == 200) {
                    this.$Message.success(res.message);
                }
            });
        },
        // 筛选
        renderTable: function(name) {
            this.dataloading = true;
            this.pages.currentPage = 1;
            var ps = { 'key': this.formItem.key,'page':1 ,size:this.pages.size};
            this.$api.shop.list(ps).then(res => {
                this.dataloading = false;
                if (res.code == 200) {
                this.tablelist = res.result.list;
                this.pages.total = res.result.total
                this.$Message.success(res.message);
                }
            });
            return;
        },
        // 批量删除
        deleteData: function() {
            // 弹出确认框
            this.$Modal.confirm({
                title: '警告',
                content: '<p>此操作不可恢复，三思而后行...</p>',
                onOk: () => {
                    var ids = [];
                    this.selectData.forEach((item, index) => {
                        ids.push(item.id);
                    })
                    this.$api.shop.remove({ shop_id: ids }).then(res => {
                        if (res.code == 200) {
                            this.$Message.success(res.message);
                            this.getTableList();
                        }
                    });
                }
            });
        },
        authTarget:function(id){
            window.open('/pddauth?shopid=' + id,'_blank');
        },
        addressTarget:function(id){
            window.open('/pddaddresslist?shopid=' + id,'_blank');
        },
    }
}
</script>
